<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Datatable Paginator Tests</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.1/build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.1/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.10.1/build/cssbase/base-min.css">
<script type="text/javascript" src="../../../build/yui/yui.js"></script>

<style>
    html {
        font-family: sans-serif;
        font-size: smaller;
    }

    .message {
        padding: 5px;
        font-size:120%;
        background: #FFFCB6;
        border:1px solid #C9C675;
    }

    #results dt {
        font-weight:bold;
        padding:3px;
        display:block;
    }
    #results dd {
        font-weight:normal;
        color:grey;
    }
    #results dd span {
        color: red;
        font-weight:bold;
    }
    #table {
        display: inline-block;
        margin: 50px;
        vertical-align: top;
    }
</style>
</head>

<body class="yui3-skin-sam">
<button>Toggle Paginator</button>
<div id="table"></div>


<script type="text/javascript">




YUI({
    filter: 'raw',
    allowRollup: false,
    combine: false,
    useBrowserConsole: true
}).use("console", "test", "dump", "datatable","datatable-paginator","node","json-parse", 'datatype-number', function(Y) {

    var data = [],
        data2 = [];

    while (data.length < 100) {
        data.push({
            id: data.length + 1,
            name: ['a','b', 'c','d','e','f','g'][data.length % 7].toUpperCase() + ':' + data.length,
            price: Math.round((Math.random() + Math.random()) * 500) / 500,
            qty: Math.ceil(data.length * Math.random() + Math.random())
        });
        data2.push({
            id: data2.length + 1,
            name: ['a','b', 'c','d','e','f','g'][data2.length % 7].toUpperCase() + ':' + data2.length,
            price: Math.round((Math.random() + Math.random()) * 500) / 500,
            qty: Math.ceil(data2.length * Math.random() + Math.random())
        });
    }

    var table = new Y.DataTable({
        columns: [ 'id', 'name', {
            key: 'price',
            formatter: function (o) {
                return Y.Number.format(o.data.price, {
                    prefix: "$",
                    thousandsSeparator: ",",
                    decimalSeparator: ".",
                    decimalPlaces: 2
                })
            }
        }, 'qty', {
            key: 'fn',
            formatter: function(o) {
                return Y.Number.format(o.data.price * o.data.qty, {
                    prefix: "$",
                    thousandsSeparator: ",",
                    decimalSeparator: ".",
                    decimalPlaces: 2
                });
            }
        } ],
        data: data,
        render: '#table',
        // rows per page turns on/off paginator
        rowsPerPage: null,
        paginatorLocation: ['header', 'footer']
    });

    Y.one('button').on('click', function (e) {
        if (table.get('rowsPerPage') === null) {
            // turn it on
            table.set('rowsPerPage', 10);
        } else {
            table.set('rowsPerPage', null);
        }
        console.log(table.get('rowsPerPage'));

    });

    Y.later(3000, this, function () {
        table.set('data', new Y.ModelList().reset(data2));
    });


});

</script>
</body>
</html>
